<template>
  <!-- v-cloak 它用于避免在渲染未完成时页面显示出模板标签的原始代码，从而避免页面闪烁问题。 -->
  <div class="app" v-cloak>
    <router-view />
  </div>
</template>

<script setup>
  import { onMounted } from "vue";
  import { ElNotification } from "element-plus";
  onMounted(() => {
    document.addEventListener("visibilitychange", function () {
      if (document.visibilityState === "visible") {
        // 当页面变为可见状态时执行的操作
        ElNotification({
          message: "彦祖，欢迎回来！",
          type: "success",
          position: "bottom-right",
        });
        // console.log("页面可见");
      } else if (document.visibilityState === "hidden") {
        // 当页面变为隐藏状态时执行的操作
        // console.log("页面隐藏");
      }
    });
  });
</script>
